<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    props: {
        photos: {
            type: Array,
            default: []
        }
    },
    setup(props) {
        // console.log('1111', props.photos)
        const ENV = import.meta.env.PROD
        // const imgUrlPrefix = ENV ? '.' : './public'
        // console.log(base.value) // 开发环境和线上部署环境不一样
        const photos = props.photos.map(path => {
            return { url: `/img/${path}`, path: path }
        })
        return {
            photos: photos
        }
    }
})

</script>

<template>
    <div class="wall">
        <div class="photo-box" v-for="(photo, index) in photos">
            <img v-show="photo.path" class="photo" :src="photo.url"  :alt="photo"/>
        </div>
    </div>

</template>

<style scoped>
.wall {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.photo-box {
    width: 11vw;
    height: 32.33vh;
}
.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
</style>
